const { defineConfig } = require("@vue/cli-service");
const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}

// Vue CLI（基于 webpack）默认只识别 以 VUE_APP_ 开头的变量，但对以下特殊变量做了例外处理：
// NODE_ENV BASE_URL PORT HTTPS HOST
// 所以你可以直接使用 process.env.PORT，无需加 VUE_APP_ 前缀。
const port = process.env.PORT || process.env.npm_config_port || 8000; // 端口

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '',

  devServer: {
    port: port,

    // overlay 已被废弃了
    // overlay: {
    //   warnings: false,
    //   errors: true
    // }
  },
  css:{
    loaderOptions: {
      sass: {
        additionalData: `@import "@/assets/css/global.scss";`,
      },
      postcss: {
        postcssOptions: {
          // plugins: [
          //   [
          //     // 一个 PostCSS 插件，用于将 CSS 中的 px 单位自动转换为视窗单位（如 vw, vh），以实现移动端或响应式布局的适配。
          //     // 适配的场景: 移动端 H5 页面, PC 端大屏展示项目, 需要根据屏幕宽度动态缩放 UI 的项目
          //     // 如果你使用了 rem 方案，则不需要此插件。
          //     "postcss-px-to-viewport",
          //     {
          //       unitToConvert: "px", // 要转化的单位
          //       viewportWidth: 1920, // UI设计稿的宽度
          //       unitPrecision: 6, // 转换后的精度，即小数点位数
          //       propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          //       viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
          //       fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
          //       selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，
          //       minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          //       mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          //       replace: true, // 是否转换后直接更换属性值
          //       landscape: false, // 是否处理横屏情况
          //     }
          //   ]
          // ]
        }
      }
    },
  },

  configureWebpack: {
    resolve: {
      alias: {
        "@": resolve("src")
      }
    }
  },
  chainWebpack: (config) => {
    config
      .plugin('html')
      .tap(args => {
        args[0].title = 'VUE-ADMIN-TEMPLATE'
        return args
      })
  }
});
